<template>
  <view class="detail-container">
    <text class="detail-title">{{ title }}</text>
    <!-- 新闻图片 -->
    <image class="detail-image" v-if="imageUrl != 'None'"  :src="imageUrl" mode="aspectFill"></image>
    <text class="detail-description">{{ description }}</text>
    <text class="detail-date">{{ formatDate(date) }}</text>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '', // 新闻标题
        description: '', // 新闻正文
        date: '', // 新闻发布时间
        imageUrl: '', // 新闻图片 URL
      };
    },
    onLoad(options) {
      // 从路由参数中获取新闻数据
      this.title = decodeURIComponent(options.title);
      this.description = decodeURIComponent(options.description);
      this.date = decodeURIComponent(options.date);
      this.imageUrl = decodeURIComponent(options.imageUrl); // 获取图片 URL
    },
    methods: {
      formatDate(dateString) {
        // 格式化日期
        const isoDateString = dateString.replace(' ', 'T').replace(' +0000', '+00:00');
        const date = new Date(isoDateString);

        // 格式化日期为 "YYYY-MM-DD"
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
        const day = String(date.getDate()).padStart(2, '0'); // 补零
        return `${year}-${month}-${day}`;
      },
    },
  }
</script>

<style lang="scss">
  .detail-container {
    padding: 20px;
  }

  .detail-title {
    display: block;
    /* 标题独占一行 */
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    /* 标题与正文之间的间距 */
  }
  .detail-image {
      display: block;
      width: 100%; /* 图片宽度占满容器 */
      height: 200px; /* 图片高度固定 */
      border-radius: 8px; /* 图片圆角 */
      margin-bottom: 16px; /* 图片与正文之间的间距 */
    }
  .detail-description {
    display: block;
    /* 正文独占一行 */
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
    /* 正文与时间之间的间距 */
  }

  .detail-date {
    display: block;
    /* 时间独占一行 */
    font-size: 14px;
    color: #999;
  }
  text{
    user-select: text; /* 允许用户选择文本 */
    -webkit-user-select: text; /* 兼容旧版浏览器 */
  }

</style>
